<!DOCTYPE html>
<html>
    {% load static %}
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
<!--external css-->
<link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    
<!-- Custom styles for this template -->
<link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
<link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static 'assets/js/jquery.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script class="include" type="text/javascript" src="{% static 'assets/js/jquery.dcjqaccordion.2.7.js' %}"></script>
<script src="{% static 'assets/js/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.nicescroll.js' %}" type="text/javascript"></script>


<!--common script for all pages-->
<script src="{% static 'assets/js/common-scripts.js' %}"></script>

<!--script for this page-->

<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="{% static 'assets/js/echarts.js' %}"></script>
<script src="{% static 'assets/js/highlight.min.js' %}"></script>
    <script>
        hljs.highlightAll();
    </script>

    <script src="{% static 'assets/dist/notice.min.js' %}"></script>
    <script>
        const notice = new Notice();
    </script>

    <script src="{% static 'assets/js/main.js' %}"></script>
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'assets/dist/notice.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/default.min.css' %}">
    <link href="{% static 'assets/css/the-datepicker.css' %}" rel="stylesheet">

    <script>
        //plant改变
        $(document).ready(function() {
            $("#plant2").change(function(){ 
                
                $.ajax({
                    type: "POST",
                    url: "{% url 'MM:ajax_getStockByName' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        //plant值
                        name:$("#plant2").val(),
                    },
                    
                    success: function(data) {
                        $('#test2').text(data);
                        //add：如果没有该工厂，回传回来一个message提示
                        var dataObj = eval("("+data+")");
                        //注意：plant选择空的时候，这三项也返回空
                        fields = dataObj[0].fields
                        $("#pgrp2").val(fields.pGrp);
                        $("#pOrg2").val(fields.pOrg);
                        $("#company2").val(fields.companyCode);
                    },
                    failure: function() {
    
                    }
                });
            
            }); 
            $("#plant3").change(function(){ 
                
                $.ajax({
                    type: "POST",
                    url: "{% url 'MM:ajax_getStockByName' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        //plant值
                        name:$("#plant3").val(),
                    },
                    
                    success: function(data) {
                        $('#test2').text(data);
                        //add：如果没有该工厂，回传回来一个message提示
                        var dataObj = eval("("+data+")");
                        //注意：plant选择空的时候，这三项也返回空
                        fields = dataObj[0].fields
                        $("#pgrp3").val(fields.pGrp);
                        $("#pOrg3").val(fields.pOrg);
                        $("#company3").val(fields.companyCode);
                    },
                    failure: function() {
    
                    }
                });
            
            }); 
            $.ajax({
                type: "POST",
                url: "{% url 'MM:ajax_load_sorg' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择销售组织</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Sorg+'>'+ dataObj[i].Sorg + '--' + dataObj[i].Name1 + '</option>' ;
                    }
                    var items=document.getElementsByName("sorg");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_meaunit' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择单位</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Meaunit+'>'+ dataObj[i].Meaunit + '--' + dataObj[i].Name + '</option>' ;
                    }
                    
                    var items=document.getElementsByName("meaunit");
                    console.log(items);
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }
                },
                failure: function() {
    
                }
            });
            
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_plant' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择工厂</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Plant+'>'+ dataObj[i].Plant + '--' + dataObj[i].Name + '</option>' ;
                    }
                    //由于一个页面里有多个表单，所以用name寻找各个下拉框进行赋值
                    var items=document.getElementsByName("plant");
                    console.log(items);
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_porg' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择采购组织</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Porg+'>'+ dataObj[i].Porg + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("porg");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_company' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择公司编码</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].CompanyCode+'>'+ dataObj[i].CompanyCode + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("company");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_pgrp' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择采购组</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Pgrp+'>'+ dataObj[i].Pgrp + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("pgrp");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }  
                },
                failure: function() {
    
                }
            });
            
        });
    function re(){
        document.getElementById("fu").style.display="none";
                document.getElementById("yuan").style.display="";
    };
    function openInsertModal() {

        //弹出模态框
        
        $("#myModalcjz").modal("show")
        
        };
    </script>
    <body>
        <section id="main-content">
            <section class="wrapper">
                <h3><i class="fa fa-angle-right"></i> 查看商品收据
                </h3>
                <div class="row mt">
                  <div class="col-lg-12">
                  <div class="form-panel3">
                        
                      <form id='material1' class="form-horizontal style-form" method="get">
                          <!-- <div class="form-group"> -->
                              <!-- <label class="col-sm-2 col-sm-2 control-label">搜索</label> -->
                              <div class="col-sm-3">
                                <input class="form-control" type="text" placeholder="请输入收据编号" id="sjcode">
                              </div>
                              <div class="col-sm-3">
                                <input class="form-control" type="text" placeholder="请输入创建者编码" onclick="openInsertModal()" id="cjzcode">
                            </div>
                            <div class="col-sm-3">
                                <input class="form-control" type="text" id="my-input" placeholder="请输入创建日期">
                            </div>
                            <script src="{% static 'assets/js/the-datepicker.js' %}"></script>
                                    <script>
                                        (function () {
                                            const input = document.getElementById('my-input');
                                            const datepicker = new TheDatepicker.Datepicker(input);
                                            datepicker.render();
                                        })();
                                        (function () {
                                            const input = document.getElementById('my-input2');
                                            const datepicker = new TheDatepicker.Datepicker(input);
                                            datepicker.render();
                                        })();
                                    </script>
                              <button type="submit" formmethod="post" class="btn btn-success "><i class="fa fa-search"></i></button>
                            </form>
                              
                            <div class="col-sm-12">
                                <div class="modal fade" id="myModalcjz" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                                    <div class="modal-dialog">
                                      <div class="modal-content">
                                        <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                          <h4 class="modal-title" id="myModalLabel">创建者编码</h4>
                                        </div>
                                        <div class="modal-body">
                                          
                                        <table  class="table table-bordered table-striped table-condensed">
                                            <thead>
                                                <!-- tr 指定表行标签-->
                                                <tr>
                                                    <!-- th 设置表头内容，默认加粗-->
                                                    <th style="width: 100px;">序号</th>
                                                    <th>创建者编码</th>
                                                </tr>
                                            </thead>
                                            <tbody id="cjzDiv">
                        
                                            </tbody>
                                        </table>
                        
                                        <script>   //不需要提交表单，点击input框加载modal直接列出创建者编码
                                            
                                                
                                            $('').on('', function(e) {
                                                e.preventDefault();
                                                $.ajax(
                                                {
                                                    type: 
                                                    url: 
                                                    data:{
                                                       
                                                    },
                                                    success: function() {
                                                      var i=0 //序号
                                                        for() {
                                                            i++
                                                            out += '<tr><td>'+ i + '</td><td>' + /* 创建者编码 */ +'</td><tr>';
                                                        }
                                                        document.getElementById("cjzDiv").innerHTML=out;
                                                    },
                                                    failure: function() {
                                
                                                    }
                                                })
                                            });
                                            $("table").on("dblclick","tr",function(e){
                                                
                                                document.getElementById("cjzcode").value=$(this).find('td').eq(0).text();
                                                $('#myModalcjz').modal('hide')
                                                
                                            })
                                            
                                        </script>
                                        
                                        </div>
                                        <div class="modal-footer">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                        <!--创建者编码modal-->
                        
              {% comment %} style="display: none;" {% endcomment %}
              <div  id='details'>  
                <div class="row mt">
                    <div class="col-md-12">
                      <div class="col-md-12">
                       
                      <div class="content-panel">
                          <!-- <div class="form-panel2"> -->
                          
                          <table class="table table-striped table-advance table-hover">
                                  <h4><i class="fa fa-angle-right"></i> 商品收据列表</h4>
                                  <hr>
                              <thead>
                              <tr>
                                <th>收据编码</th>
                                <th>采购订单编码</th>
                                <th>条目编码</th>
                                <th> 商品名称</th>
                                <th> 数量</th>
                                <th> 实收数量</th>
                                <th>创建时间</th>
                                <th>查看详情</th>
                                 
                              </tr>
                              </thead>
                              <tbody id="searchDiv"></tbody>
                          </table>
                      </div>
                      </div>
                       
                        </div>
                    </div><!-- /col-md-12 -->
                </div><!-- /row -->
  
          </section>
        </section><!-- /MAIN CONTENT -->
  
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2014 - Alvarez.is
                <a href="basic_table.html#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

        {% comment %} <textarea id="item_result"></textarea> {% endcomment %}

        <script>
            //收据搜索 不限制三项内容是否填写默认返回全部
                    $('#material1').on('submit', function(e) {
                        e.preventDefault();
                        $.ajax(
                        {
                            type: "POST",
                            url: "{% url 'MM:ajax_search_receipt' %}",
                            data:{
                                dataType: "json",
                                csrfmiddlewaretoken: '{{ csrf_token }}',
                                //输入三个搜索框的值
                                uid: $("#cjzcode").val(),
                                pk: $("#sjcode").val(),
                                date: $("#my-input").val(),
                            },
                            success: function(data) {
                                $('#item_result').text(data);
                                var dataObj = eval("("+data+")");
                                if(dataObj.status==1){
                                    showMessage({text: dataObj.message ,type: 'success'});
                                }else{
                                    showMessage({text: dataObj.message ,type: 'error'});
                                }
                                
                                for(i = 0; i < dataObj.gr.length; i++) {
                                    content2 =dataObj.gr[i].fields
                                    //": 10, "sType": "1", "time": "2022-08-18T10:05:04.605Z", "postTime": "2022-08-18T10:03:52Z", "orderItem": 1, "euser": 1}, "user": {"id": 2,
                                    var out='';
                                     out += '<tr><td>'+ dataObj.gr[i].pk+ '</td><td id="itempk'+i+'">' + dataObj.gr[i].po.id + '</td><td id="orpk'+i+'">' + dataObj.gr[i].orderItem.itemId+ '</td><td>' + dataObj.gr[i].material.mname+ '</td><td>'+ dataObj.gr[i].orderItem.quantity+ '</td><td>'+ content2.actualQnty+ '</td><td>'+ content2.time.substr(0,10) +'</td><td><button class="btn btn-success btn-xs" onclick="submitpk(this.id)" id="bid'+i+'"><i class="fa fa-search-plus"></i></button></td></tr>';
                                 }
                                 document.getElementById("searchDiv").innerHTML=out;
                            },
                            failure: function() {
    
                            }
                        })
                    });
    
                    //点击按钮，收据编码给后端
                    function submitpk(clicked_id){
                        var itempk="#itempk"+clicked_id[3];
                        var orpk="#orpk"+clicked_id[3];
                        console.log($(orpk).html());
                        //待补充，两个参数    dataObj.gr[i].orderItem.itemId dataObj.gr[i].po.id
                        var target="{% url 'MM:display_receipt' %}"+'?'+'itemID='+ $(orpk).html() +'&'+'orderID='+$(itempk).html();
                        window.location.href=target; 
                        
                    }
                </script>


        <!-- 确认提示 -->
        <script>
            function tip(){
                if(confirm("您确认修改吗？")){
                return true;
                }
                else{
                return false;
                }
            } 
        </script>

    </body>
</html>